<template>
   <div 
      class="csg-switch" 
      :class="{ active: isActive }"
      @click="toggleSwitch"
   >
      <div class="csg-slider"></div>
      <span class="csg-switch-label on">{{activeText}}</span>
      <span class="csg-switch-label off">{{inactiveText}}</span>
   </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const isActive = ref(false);
const props = defineProps({
  active: {
    type: Boolean,
    default: undefined,
  },
  activeText: {
    type: String,
    default: '开启',
  },
  inactiveText: {
    type: String,
    default: '关闭',
  },


});
watch(
  () => props.active,
  (val) => {
    isActive.value = val;
  },
  { immediate: true }
);


const emits = defineEmits(['switchChange']);

const toggleSwitch = () => {
   isActive.value = !isActive.value;
   emits('switchChange', isActive.value);
};
</script>

<style lang="scss" scoped>
.csg-switch{
    width: 80px;
    height: 34px;
    background-color: #f5f5f5;
    box-shadow: 
        inset 0 1px 3px rgba(0,0,0,0.2),
        0 2px 5px rgba(0,0,0,0.1);
    border-radius: 17px;
    margin: 10px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    overflow: hidden;
    
    &:hover {
        background-color: #e9e9e9;
    }
    
    &.active {
        background-color: #4CAF50;
        
        .csg-slider {
            transform: translateX(46px);
            background-color: white;
        }
        
        .csg-switch-label.on {
            opacity: 1;
        }
        
        .csg-switch-label.off {
            opacity: 0;
        }
    }

    .csg-slider{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: white;
        position: absolute;
        left: 2px;
        top: 2px;
        box-shadow: 
            0 2px 5px rgba(0,0,0,0.2),
            0 1px 2px rgba(0,0,0,0.1);
        transition: 
            transform 0.3s ease,
            background-color 0.3s ease;
        z-index: 2;
    }
    
    .csg-switch-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        font-weight: bold;
        color: white;
        transition: opacity 0.2s ease;
        z-index: 1;
        
        &.on {
            left: 12px;
            opacity: 0;
        }
        
        &.off {
            right: 12px;
            opacity: 1;
            color: #666;
        }
    }
}
</style>